<template>
  <div id="app" style="height:100vh">
    <header id = "header" >
      <div>
          <div id = "header-logo"><img src="./assets/university-logo.png"/></div>
          <div style="float:left;margin-left: 10px;margin-top: 10px;color:#ccc">电子科技大学成都学院</div>
      </div>
    <div id = "header-signIn"><img src="./assets/header.jpg"/></div>
    </header>
    <div id = "body">
      <div id = "menu">
        <el-menu
          style="border-right: solid 0px #e6e6e6;"
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">手机搜索</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div id = "content">
        <div style="">
          <div style="margin:10px;height:40px;display:inline-block">点击  <el-button type="primary" round @click="showDialog">这里</el-button>设置高级检索条件</div>
          <div style="display:inline-block"><el-tooltip content="清除高级查询条件" placement="top"><el-button @click="clearAdvanceParams">clear</el-button></el-tooltip></div>
        </div>
        <div style="width:300px;height:35px;margin-bottom:10px">
          <el-input placeholder="请输入内容" v-model="keyword" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="handlerSearch"></el-button>
          </el-input>
        </div>
        <div style="width: 100%;height: calc(100% - 128px);">
          <el-table
             style="height: calc(100% - 30px);overflow:auto"
            :data="tableData">
            <el-table-column
              prop="index"
              label="序号"
              align="center"
              width="90">
            </el-table-column>
            <el-table-column
              prop="brandName"
              label="品牌"
              width="180">
            </el-table-column>
            <el-table-column
              prop="spuName"
              label="商品名称"
              width="200">
              <template slot-scope="scope">
              <span v-html="scope.row.spuName"></span>
            </template>
            </el-table-column>
            <el-table-column
              prop="skuTitle"
              label="商品标题"
              width="360">
            <template slot-scope="scope">
              <span v-html="scope.row.skuTitle"></span>
            </template>
            </el-table-column>
            <el-table-column
              prop="skuPrice"
              label="价格"
              width="180">
            </el-table-column>
            <el-table-column
              prop="properties"
              label="属性"
              width="360">
            </el-table-column>
            </el-table>
          <div style="background:#fff;height:30px">
            <el-pagination
              style="text-align: right"
              layout="total, sizes, prev, pager, next"
              @current-change="handleCurrentChange"
              @prev-click="handlePrevClick"
              @next-click="handlerNextClick"
              @size-change="handleSizeChange"
              :page-sizes="[10,20,50]"
              :page-size="page.pageSize"
              :total="page.total">
              </el-pagination>
          </div>
      </div>
      <el-dialog title="高级检索" :visible.sync="dialogFormVisible">
        <el-form :model="form" label-width="100px" label-position="right">
          <el-form-item label="品牌" >
            <el-select v-model="paramBrandIds" multiple placeholder="请选择品牌" >
              <el-option v-for="brand in brands" :key="brand.brandId" :label="brand.brandName" :value="brand.brandId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分类">
            <el-select v-model="form.catalogId">
              <el-option v-for="catalog in catalogs" :key="catalog.catalogId" :label="catalog.catalogName" :value="catalog.catalogId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item  v-for="(attr, index) in attrs" :label="attr.attrName" :key="index">
              <el-radio-group v-model="paramsAttrs[index]" size="mini">
                <el-radio-button v-for="(item, index) in attr.attrValue" :label="`${attr.attrId}_${item}`" :key="index">{{item}}</el-radio-button>
              </el-radio-group>
          </el-form-item>
          <el-form-item label="价格区间">
            <el-col :span="9">
              <el-input  v-model="form.skuPriceStart" style="width: 100%;"></el-input>
            </el-col>
            <el-col class="line" :span="2" style="padding-left: 25px;">-</el-col>
            <el-col :span="9">
              <el-input  v-model="form.skuPriceEnd" style="width: 100%;"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item  label="价格排序">
              <el-radio-group v-model="form.sort">
                <el-radio label="skuPrice_desc">降序</el-radio>
                <el-radio label="skuPrice_asc">升序</el-radio>
              </el-radio-group>
          </el-form-item>
          <el-form-item label="上架时间">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              value-format="yyyy-MM-dd"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="formConfirm">确 定</el-button>
        </div>
      </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data() {
    return {
      
      formLabelWidth:100,
      keyword:'',
      tableData:[],
      page:{"total": 0, "pageSize": 10, "curPage" : 1},
      dialogFormVisible:false,
      form:{},
      paramBrandIds:[],
      paramsAttrs:[],
      attrs:[],
      brands:[],
      catalogs:[],
      dateRange:[]
    }
  },
  methods: {
    handlerSearch() {
      this.search(this.form)
    },
    search(params) {
      params.keyword = this.keyword
      params.pageNum = this.page.curPage
      params.pageSize = this.page.pageSize
      axios.get('http://localhost:8081/product', {params: params}).then(response => {
        this.tableData = response.data.data.data
        this.page.total = response.data.data.total
        for(let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].index = i
          let properties = ''
          for(let attr of this.tableData[i].attrs) {
            properties = properties + attr.attrName + ":" + attr.attrValue + ","
          }
          this.tableData[i].properties = properties
        }
      })
    },
    handleCurrentChange(curPage) {
      this.page.curPage = curPage
      this.search(this.form)
    },
    handlePrevClick(curPage) {
      this.page.curPage = curPage
      this.search(this.form)
    },
    handlerNextClick(curPage) {
      this.page.curPage = curPage
      this.search(this.form)
    },
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.search(this.form)
    },
    showDialog() {
      this.dialogFormVisible = true
      this.form = {}
      this.querySearchParams()
    },
    querySearchParams() {
      axios.get('http://localhost:8081/product/aggregate?keyword=' + this.keyword).then(response => {
        this.brands = response.data.data.brands
        this.catalogs = response.data.data.catalogs
        this.attrs = response.data.data.attrs
      })
    },
    formConfirm() {
      if(this.dateRange.length == 2) {
        this.form.startTime = this.dateRange[0]
        this.form.endTime = this.dateRange[1]
      }
      this.form.brandIds = this.splitArr(this.paramBrandIds, ",")
      this.form.attrs = this.splitArr(this.paramsAttrs, ",")
      this.search(this.form)
      this.dialogFormVisible = false
    },
    splitArr(arr, symbol) {
      if(arr == null || arr.length == 0) {
        return ""
      }
      let result = ''
      for(let i = 0; i < arr.length; i++) {
        if(!arr[i]) {
          continue
        }
        result = result + arr[i] + symbol
      }
      return result.substr(0, result.length - 1)
    },
    clearAdvanceParams() {
      this.form = {}
      this.paramBrandIds = []
      this.paramsAttrs = []
      this.$message({
          message: '清除成功',
          type: 'success'
        });
    }
  }
}
</script>

<style>
* {
  margin: 0px;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

#header {
  box-shadow: 0 1px 10px rgb(0 0 0 / 50%);
  background-color: rgb(84, 92, 100);
  height:40px;
  z-index:1
}

#body {
  overflow: hidden;
  display:flex; height: calc(100% - 40px)
}

#header-signIn {
    margin-top:5px;
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 50%;
    background-color: #ccc;
    float:right;
    margin-right:10px;
    font-size: 0;
}

#header-logo {
  margin-top:5px;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    border-radius: 50%;
    background-color: #ccc;
    float:left;
    margin-left:10px;
    font-size: 0;
}

#menu {
  height:100%;
  width:150px;
  background-color: #545c64;
  border-right: solid 1px #e6e6e6;
}

#content {
  height:100%;
  flex-grow:1;
  background-color:#f5f5f5;
  padding:20px;
}

.el-form-item__label {
        text-align: justify;
    }

</style>
